<template>
    <div>
        <el-dialog 
            title="创建任务" 
            :visible="true" 
            append-to-body 
            :close-on-click-modal="false"
            @closed="handleCloseTaskCreateDialog"
            @close="handleCloseTaskCreateDialog"
        >
            <el-form :model="taskCreateForm" ref="taskCreateForm" :rules="createRules">
                <el-form-item label="单号" prop="mailnos">
                    <el-input v-model="taskCreateForm.mailnos" type="textarea" :rows="4" placeholder="请输入单号,单号一行一个"></el-input>
                </el-form-item>
                <el-form-item label="快递公司" prop="delivery_id">
                    <el-select
                        v-model="taskCreateForm.delivery_id"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入快递公司名称"
                        :remote-method="onGetDeliverList"
                        :loading="isLoadingDeliverList"
                    >
                        <el-option
                            v-for="item in deliverList"
                            :key="item.delivery_id"
                            :label="item.delivery_name"
                            :value="item.delivery_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="taskCreateForm.remark" type="text" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>

            <div class="dialog-flex-footer">
                <div class="placeholder"></div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleCloseTaskCreateDialog">取 消</el-button>
                    <el-button type="primary" @click="handleCreateTaskQuery">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { createQueryTask } from '@/api/group/searchTask';
import { getDeliveryCompanyList } from "@/api/group/base";

export default {
    name: 'createTaskDialog',
    data() {
        return {
            taskCreateForm: {
                task_type: "Q",
                reqType: 'S'
            },
            deliverList: [],
            createRules: {
                mailnos: [{ required: true, message: '请输入单号', trigger: 'blur' }],
                delivery_id: [{ required: true, message: '请选择快递公司', trigger: 'change' }]
            },
            isLoadingDeliverList: false,
        }
    },
    mounted() {
        
    },
    methods: {
        //获取快递公司列表
        onGetDeliverList(value) {
            getDeliveryCompanyList({
                page: 1,
                limit: 100,
                keyword: value
            }).then(res => {
                this.deliverList = res?.data;
            })
        },
        handleCloseTaskCreateDialog() {
            this.$emit('onCloseTaskDialog', false)
        },
        handleCreateTaskQuery() {
            createQueryTask(this.taskCreateForm).then(res => {
                this.$emit('onCloseTaskDialog', false)
                if(res?.code === 0) {
                    this.$modal.msgSuccess('创建成功')
                } else {
                    this.$message.msgError(res?.msg)
                }
            })
        }
    },

}
</script>
